<template>
  <view class="p-16rpx">
    <!-- 骨架屏：使用 uv-skeletons，并让 root 显示成 grid -->
    <uv-skeletons
      v-if="loading"
      :loading="loading"
      :skeleton="skeleton"
      class="grid grid-cols-4 gap-16rpx"
    />

    <!-- 真正内容 -->
    <view v-else class="grid gap-16rpx" :style="gridStyle">
      <view
        v-for="item in items"
        :key="item.id || item.c_type || item.c_name"
        class="flex flex-col items-center justify-center rounded-16rpx p-16rpx"
        @click="() => onItemClick(item)"
      >
        <image
          class="h-80rpx w-80rpx"
          :src="item.c_image || ''"
          mode="aspectFit"
        />
        <text class="mt-8rpx text-25rpx text-[#333] font-normal">
          {{ item.c_name || '' }}
        </text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { LegalCategory } from '@/api/types/home'
import { computed, ref } from 'vue'

const props = defineProps<{
  items: LegalCategory[]
  columns?: number
  loading?: boolean
}>()

const emit = defineEmits<{
  (e: 'click', item: LegalCategory): void
}>()

const columns = props.columns || 4
const rows = Math.ceil((props.items?.length || 0) / columns)

// grid inline style（避免 tailwind 动态类问题）
const gridStyle = computed(() => ({
  display: 'grid',
  gridTemplateColumns: `repeat(${columns}, 1fr)`,
  gap: '16rpx',
}))

function onItemClick(item: LegalCategory) {
  emit('click', item)
}

/**
 * uv-skeletons 的配置（一个 flex 类型，重复 8 个，占位为：avatar(正方形) + line）
 * - num: 表示重复多少个占位项（这里预设 8 个）
 * - children: avatar + line，分别控制大小/样式
 *
 * 注意：把 uv-skeletons 本身设置为 grid（在 template 的 class），这样生成的占位项会被排列成网格。
 */
const skeleton = ref([
  // 整个 item 包一层 flex，用 num 控制多少个
  {
    type: 'flex' as const,
    num: 8,
    style: 'display:flex;flex-direction:column;align-items:center;padding:16rpx;background:#fff;border-radius:16rpx;',
  },

  // avatar 占位图
  {
    type: 'flex' as const,
    num: 8,
    style: 'width:80rpx;height:80rpx;border-radius:16rpx;',
  },

  // 下方文字 line
  {
    type: 'flex' as const,
    num: 8,
    style: 'width:60%;height:20rpx;margin-top:8rpx;',
  },
])
</script>

<style scoped>
/* 你也可以在这里微调占位项的背景、圆角等样式 */
</style>
